<template>
    <div class="selectTreeClass">

        <el-select
            v-model="mineStatusLabel"
            :disabled="depStatus"
            placeholder="请选择"
            clearable
            multiple
            collapse-tags
            @clear="clearableFn"
            @remove-tag="remove"
            ref="selectRef"
        >
            <div style="position: relative;height: 40px;">
                <div style="position: absolute;left: 20px;">
                    <el-button @click="emit" size="small" >
                        确定
                    </el-button>
                    <el-button  @click="cancle" size="small">
                        取消子选项
                    </el-button>
                    <el-button @click="close" size="small">
                        关闭
                    </el-button>
                </div>
            </div>

            <el-option :value="mineStatusValue" style="height: auto">
                <el-tree
                    :default-expand-all="true"
                    :expand-on-click-node="false"
                    :data="treeData"
                    show-checkbox
                    node-key="deptCode"
                    :check-strictly="true"
                    :props="defaultProps"
                    ref="treeRef"
                    @check="handleCheckChange"
                    @check-change="checkChange"
                    @node-click="nodeClick"
            ></el-tree>
            </el-option>
        </el-select>
    </div>
</template>
  
  <script>
export default {
    name: 'userBasicInformation',
    components: {},
    props:{
        treeData:{
            type: Array,
            require:true,
            default: ()=>[]
        },
        depStatus:{
            type: Boolean,
            default: false
        },
    },
    data() {
        return {
            defaultProps: {
                children: 'children',
                label: 'deptName',
                id: 'deptCode',
            },
            mineStatusLabel: [],
            mineStatusValue: [],
            // paginations:{
            //     groupIds:[]
            // },
            cacheSelected:[],

            // treeData: dataTree,

            rowCancelObj: null,
        }
    },

    methods: {
        emit(){
            this.$emit('selected',this.mineStatusValue)
            this.$refs.selectRef.blur()

        },
        close(){
            this.$emit('cancle',this.mineStatusValue);
            this.$refs.selectRef.blur()
        },
        cancle() {
            if (this.rowCancelObj) {
                let arr = this.diguiTree(this.rowCancelObj)

                arr.forEach(item=>{
                    this.$refs.treeRef.setChecked(item,false)

                    let indexVal =    this.mineStatusValue.findIndex(obj=>obj.deptCode == item)
                    if(indexVal != -1){
                        this.mineStatusValue.splice(indexVal,1)
                        this.mineStatusLabel.splice(indexVal,1)
                    }
                })

                console.log(arr)
                console.log(this.mineStatusLabel)
                console.log(this.mineStatusValue)
            }
        },

        nodeClick(data1) {
            this.rowCancelObj = data1.children
        },
        handleCheckChange() {
            let res = this.$refs.treeRef.getCheckedNodes();
            console.log(res);

            let arrLabel = [];
            let arr = [];
            res.forEach(item => {
                arrLabel.push(item.deptName);
                arr.push(item);
            });

            this.mineStatusValue = arr;
            this.mineStatusLabel = arrLabel;
            },
        checkChange(data1, selfStatus, data3) {
            // 1. 选中父 ,全选子.
            if (selfStatus === true) {
                let arr = this.digui(data1)
                arr.forEach(item=>{
                    this.$refs.treeRef.setChecked(item,true,true)
                })
            }else{
                let arr = this.digui(data1)
                arr.forEach(item=>{
                    this.$refs.treeRef.setChecked(item,false)
                })
            }

        },
        digui(obj) {
            let newArr = []

            function di(obj) {
                newArr.push(obj.deptCode)
                obj.children &&
                    obj.children.length > 0 &&
                    obj.children.forEach((item) => di(item))
            }

            newArr.push(obj.deptCode)
            obj.children &&
                obj.children.length > 0 &&
                obj.children.forEach((item) => di(item))
            return newArr
        },
        diguiTree(arr) {
            let newArr = []

            function di(obj) {
                newArr.push(obj.deptCode)
                obj.children &&
                    obj.children.length > 0 &&
                    obj.children.forEach((item) => di(item))
            }
            arr.forEach((item) => di(item))
            return newArr
        },
        //当多选时候，删除小标签时，将删除的子节点状态改为未勾选
        remove(val) {
            let selectNodes = this.$refs.treeRef.getCheckedNodes();
            for(let i = 0;i < this.$refs.treeRef.getCheckedNodes().length;i++){
                if(selectNodes[i].deptName == val){
                    let arrIds = this.digui(selectNodes[i])
                    arrIds&& arrIds.forEach((item,ind)=>{

                        this.$refs.treeRef.setChecked( arrIds[ind] , false,true)
                        console.log(this.mineStatusValue);
                        let indexVal =    this.mineStatusValue.findIndex(obj=>obj.deptCode == item)
                        if(indexVal != -1){
                            this.mineStatusValue.splice(indexVal,1)
                            this.mineStatusLabel.splice(indexVal,1)
                        }
                    })
                }
            }
            
        },
        //清除所有选项
        clearableFn() {
            this.$refs.treeRef.setCheckedKeys([])
            this.mineStatusValue = []
            this.mineStatusLabel = []
        },
    },
}
</script>
  
<style lang = "scss" scoped>
    :deep .el-input {
        width: 300px;
    }

</style>

<style lang="scss">
.el-select-dropdown.is-multiple .el-select-dropdown__item {
    padding-right: 20 !important;
}
.el-select-dropdown__item.hover{
    background-color: transparent;
}
</style>
  